<template>
  <div>
    <van-search
      class="index-top-search"
      show-action
      placeholder="请输入小区或地址"
      background="#21b97a"
    >
      <template #left>
        <van-icon name="arrow-left" />
      </template>
      <template #label>
        <router-link to="/city">
          <span class="mytz">{{ city.label }}</span>
          <span class="index-top-icon-left">▼</span>
          <span class="index-top-l">|</span></router-link
        >
      </template>
      <template #action
        ><van-icon class="index-top-icon-right" size="25" name="location-o"
      /></template>
    </van-search>
    <van-dropdown-menu>
      <van-dropdown-item v-model="value" title="区域" ref="item">
        <van-picker
          show-toolbar
          :columns="columns1"
          toolbar-position="bottom"
          @cancel="onCancel"
          @confirm="onConfirm"
        />
      </van-dropdown-item>
      <van-dropdown-item v-model="value1" title="方式" ref="item1">
        <van-picker
          show-toolbar
          :columns="columns2"
          toolbar-position="bottom"
          @confirm="onConfirm1"
          @cancel="onCancel1"
        />
      </van-dropdown-item>
      <van-dropdown-item v-model="value2" title="租金" ref="item2">
        <van-picker
          show-toolbar
          :columns="columns3"
          toolbar-position="bottom"
          @confirm="onConfirm2"
          @cancel="onCancel2"
        />
      </van-dropdown-item>
      <van-dropdown-item
        v-model="value3"
        :overlay="false"
        title="筛选"
        ref="item3"
      >
        <van-popup
          v-model="show"
          :overlay="false"
          position="right"
          :style="{ height: '100%', weight: '75%' }"
        >
          <HouseBu :zhi="quanshuju.body.roomType" :title="hux"></HouseBu>
          <HouseBu :zhi="quanshuju.body.oriented" :title="louc"></HouseBu>
          <HouseBu :zhi="quanshuju.body.floor" :title="chaox"></HouseBu>
          <HouseBu :zhi="quanshuju.body.characteristic" :title="liangd"></HouseBu>
        </van-popup>
      </van-dropdown-item>
    </van-dropdown-menu>
    <ul>
      <li v-for="(item, index) in houseList" :key="index * 100">
        <div class="left">
          <img :src="'http://liufusong.top:8080' + item.houseImg" alt="" />
        </div>
        <div class="rigth">
          <h4>{{ item.title }}</h4>
          <p>{{ item.desc }}</p>
          <van-tag
            color="#e1f5f8"
            text-color="#4dc4d1"
            v-for="(item, index) in item.tags"
            :key="index"
            >{{ item }}</van-tag
          ><br />
          <i
            ><span>{{ item.price }}</span
            >元/月</i
          >
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import HouseBu from '@/components/housebu.vue'
import { getHouse, getIf, getJqhouse } from '@/api/article'
export default {
  name: 'MyHouse',
  components: {
    HouseBu
  },
  props: {},
  data() {
    return {
      hux: '户型',
      louc: '楼层',
      chaox: '朝向',
      liangd: '亮点',
      quanshuju: '',
      obj: {},
      show: true,
      columns1: [],
      columns2: [],
      columns3: [],
      value: 1,
      value1: 1,
      value2: 1,
      value3: 1,
      city: JSON.parse(window.localStorage.getItem('city')) || {
        label: '上海',
        value: 'AREA|dbf46d32-7e76-1196',
        pinyin: 'shanghai',
        short: 'sh'
      },
      houseList: []
    }
  },
  computed: {},
  watch: {},
  async created() {
    const res = await getHouse(JSON.parse(window.localStorage.getItem('city')))
    this.houseList = [...res.body.list]
    console.log(this.houseList)
    const res1 = await getIf(JSON.parse(window.localStorage.getItem('city')))
    console.log(res1)
    this.quanshuju = res1
    console.log(this.quanshuju)
    // 开始
    const { body: hs } = res1
    const newData = []
    const showTime = function (newData, oldData) {
      for (const k in oldData) {
        if (Object.prototype.toString.call(oldData[k]) === '[object Array]') {
          newData[k] = []
          showTime(newData[k], oldData[k])
        } else if (
          Object.prototype.toString.call(oldData[k]) === '[object Object]'
        ) {
          newData[k] = {}
          showTime(newData[k], oldData[k])
        } else {
          k === 'label'
            ? (newData.text = oldData[k])
            : (newData[k] = oldData[k])
        }
      }
    }
    showTime(newData, hs)
    console.log(newData)
    // 要求所有为'label'的属性名都变成'text'
    newData.area.children[0].children = ['不限']
    this.columns1.push(JSON.parse(JSON.stringify(newData.area)))
    this.columns1.push(JSON.parse(JSON.stringify(newData.subway)))
    this.columns2 = [...JSON.parse(JSON.stringify(newData.rentType))]
    this.columns3 = [...JSON.parse(JSON.stringify(newData.price))]
  },
  methods: {
    onConfirm(value, index) {
      this.$Toast(`当前值：${value}, 当前索引：${index}`)
      console.log(index)
      console.dir(value)
      console.log(this.columns1[0].children[1].children[1].value)
      this.$refs.item.toggle()
    },
    onCancel() {
      this.$Toast('取消')
      this.$refs.item.toggle()
    },
    async onConfirm1(value, index) {
      this.$Toast(`当前值：${value.text}, 当前索引：${index}`)
      console.log(value.value)
      this.obj.hz = value.value
      const res = await getJqhouse(
        JSON.parse(window.localStorage.getItem('city')),
        this.obj
      )
      console.log(res)
      this.houseList = [...res.body.list]
      this.$refs.item1.toggle()
    },
    onCancel1() {
      this.$Toast('取消')
      this.$refs.item1.toggle()
    },
    async onConfirm2(value, index) {
      this.$Toast(`当前值：${value.text}, 当前索引：${index}`)
      console.log(value.value)
      this.obj.price = value.value
      const res = await getJqhouse(
        JSON.parse(window.localStorage.getItem('city')),
        this.obj
      )
      console.log(res)
      this.houseList = [...res.body.list]
      this.$refs.item2.toggle()
    },
    onCancel2() {
      this.$Toast('取消')
      this.$refs.item2.toggle()
    },
    onConfirm3(value, index) {
      this.$Toast(`当前值：${value}, 当前索引：${index}`)
      this.$refs.item3.toggle()
    },
    onCancel3() {
      this.$Toast('取消')
      this.$refs.item3.toggle()
    }
  }
}
</script>

<style scoped lang="less">
::v-deep [data-v-2ca42b0d] .van-dropdown-menu__bar--opened {
  z-index: 0;
}
::v-deep .van-dropdown-menu__bar--opened {
  z-index: 0;
}

li {
  display: flex;
  padding: 15px;
  width: 100%;
  /* background-color: red; */
  height: 120px;
  border-top: 1px solid #ccc;
  .rigth {
    p {
      color: #ccc;
      font-size: 13px;
    }
    i {
      color: red;
      font-size: 12px;
      span {
        font-weight: 700;
        font-size: 20px;
      }
    }
  }
  .left {
    padding-right: 7px;
    img {
      height: 80px;
      width: 110px;
    }
  }
}
::v-deep .van-dropdown-menu__title--active {
  color: #21b97a;
}
::v-deep .van-picker__cancel {
  width: 33%;
  background-color: white;
  color: #21b97a;
  border-top: 1px solid #f2f2f2;
}
::v-deep .van-picker__confirm {
  width: 66%;
  background-color: #21b97a;
  color: white;
}
.van-icon-location-o:before {
  margin-top: 4px;
  color: white;
}
.van-icon-arrow-left:before {
  color: white;
  font-size: 19px;
}
.van-search__content {
  margin-left: 2vw;
}
.mytz {
  color: #000;
}
.index-top-l {
  padding-left: 11px;
  padding-right: 5px;
  color: rgba(62, 59, 59, 0.262);
}
.index-top-icon-left {
  font-size: 12px;
  padding-left: 3px;
  color: gray;
}
</style>
